<header id="header">
    <a class="toIndex" href="/"><img src="/images/toIndex.png" /></a>
    <div id="showNav" ><img src="/images/showNav.png" /></div>
    <h1 id="webTitleLogo"><img src="/images/logo2.png" alt="杭州野生动物世界手机官网" /></h1>
    <section class="sidebar">
        <nav>
            <ul>
                <li class="oneLi"><a href="/" >首 &nbsp; &nbsp; &nbsp;页</a></li>
                <li class="oneLi">
                	<a href="javascript:;" class="navOne">动物乐园</a>
                    <section class="sidebarSec">
                        <nav>
                            <ul>
                                <li><a href="/zone/index.shtml#1" ><span>》</span>马戏</a></li>
                                <li><a href="/zone/index.shtml#2" ><span>》</span>游乐园</a></li>
                                <li><a href="/zone/index.shtml#3" ><span>》</span>中华国宝馆</a></li>
                                <li><a href="/zone/index.shtml#4" ><span>》</span>爬行长廊</a></li>
                                <li><a href="/zone/index.shtml#5" ><span>》</span>非洲猴岛</a></li>
                                <li><a href="/zone/index.shtml#6" ><span>》</span>猿猴部落</a></li>
                                <li><a href="/zone/index.shtml#7" ><span>》</span>儿童动物园</a></li>
                                <li><a href="/zone/index.shtml#8" ><span>》</span>戏水广场</a></li>
                                <li><a href="/zone/index.shtml#9" ><span>》</span>欢乐飞翔</a></li>
                                <li><a href="/zone/index.shtml#10" ><span>》</span>四白</a></li>
                                <li><a href="/zone/index.shtml#11" ><span>》</span>车行区</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物2</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物3</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物4</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物5</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物6</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物7</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物8</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物9</a></li>
                                <li><a href="/zone/index.shtml#12" ><span>》</span>其他动物10</a></li>
                            </ul>
                        </nav>
                    </section>
                </li>
                <li class="oneLi">
                    <a href="/Article/ArticleIndex" >新鲜时事</a>
                </li>
                <li class="oneLi">
                    <a href="javascript:;" >精彩上演</a>
                    <section class="sidebarSec">
                        <nav>
                            <ul>
                                <li><a href="/show/index.shtml#1" ><span>》</span>森巴大剧场</a></li>
                                <li><a href="/show/index.shtml#2" ><span>》</span>鸟类表演</a></li>
                                <li><a href="/show/index.shtml#3" ><span>》</span>迎宾舞</a></li>
                                <li><a href="/show/index.shtml#4" ><span>》</span>大象表演</a></li>
                                <li><a href="/show/index.shtml#5" ><span>》</span>丹顶鹤放飞</a></li>
                            </ul>
                        </nav>
                    </section>
                </li>
                <li class="oneLi">
                	<a href="javascript:;" class="navOne">吃住无忧</a>
                    <section class="sidebarSec">
                        <nav>
                            <ul>
                                <li><a href="/show/food.shtml" ><span>》</span>餐饮美食</a></li>
                                <li><a href="/show/hotel.shtml" ><span>》</span>酒店住宿</a></li>
                            </ul>
                        </nav>
                    </section>
                </li>
                <li class="oneLi">
                    <a href="/Image/Index" class="navOne">互动欢乐</a>
                </li>
                <li class="oneLi">
                	<a href="javascript:;" class="navOne">游园助手</a>
                    <section class="sidebarSec">
                        <nav>
                            <ul>
                                <li><a href="/show/map.shtml" ><span>》</span>园区地图</a></li>
                                <li><a href="/show/traffic.shtml" ><span>》</span>交通指南</a></li>
                                <li><a href="/show/tips.shtml" ><span>》</span>游园须知</a></li>
                                <li><a href="/show/time.shtml" ><span>》</span>表演时间</a></li>
                            </ul>
                        </nav>
                    </section>
                </li>
                <li class="oneLi">
                    <a href="javascript:;" class="navOne">网上订票</a>
                    <section class="sidebarSec">
                        <nav>
                            <ul>
                                <li><a href="/booking/chooseTicket" ><span>》</span>门票</a></li>
                                <li><a href="/booking/chooseCard" ><span>》</span>年卡</a></li>
                                <li><a href="/booking/Query" ><span>》</span>订单查询</a></li>
                            </ul>
                        </nav>
                    </section>
                </li>
            </ul>
        </nav>
    </section>
    
    <div class="shadowWrap"></div>
</header>
<div class="clear"></div>
<script>
/*侧面菜单*/
	var sheight=$("#header").css("height");
    var wheight=window.screen.height;
	var showNav=$("#showNav");
	var sidebar=$(".sidebar");
	var shadowWrap=$(".shadowWrap");
	var sidebarSec=$(".sidebarSec");
	var showNavImg=showNav.find("img");
	$(".sidebar ul,.shadowWrap,.sidebarSec ul").css("height",wheight);
	$(".sidebar,.shadowWrap").css("top","49px");
	showNav.click(function(){
		var lujing=showNavImg.attr("src"); 
		var sright = sidebar.css("marginLeft");
		var Num = parseInt(sright. substr(0,3));
		//alert(Num);
		if(Num == 322){
			sidebar.animate({"marginLeft":"192px"},500);
			shadowWrap.fadeIn();
			showNavImg.attr("src","/images/hideNav.png");
            $("html,body").css({"height":"100%","overflow":"hidden"})//页面底部超出隐藏
		}else{
            sidebar.animate({"marginLeft":"322px"},500);
    		sidebarSec.animate({"right":"-130px"},500);
    		shadowWrap.fadeOut();
    		showNavImg.attr("src","/images/showNav.png");
            $("html,body").css({"height":"auto","overflow":"visible"})//页面恢复
		}
	});

	shadowWrap.click(function(){
		sidebar.animate({"marginLeft":"322px"},500);
		sidebarSec.animate({"right":"-130px"},500);
		shadowWrap.fadeOut();
		showNavImg.attr("src","/images/showNav.png");
        $("html,body").css({"height":"auto","overflow":"visible"})//页面恢复
	})

	/*二级导航*/
	var sidebarLi=$(".sidebar .oneLi");
	sidebarLi.click(function(){
		var iThis=$(this).index();
		sidebarLi.find("ul").fadeOut();
		sidebarLi.eq(iThis).find("ul").stop(true,true).fadeIn();		
		sidebarLi.find(".sidebarSec").css({"right":"130px"});
	});

    // 页面缩放
    function fnViewScale(){
        var web_wrap = $("#web_wrap")[0];
        var sreenWidth = document.body.clientWidth;
        var iScale = sreenWidth/320;
        web_wrap.style.transform = "scale("+iScale+")";
        web_wrap.style.webkitTransform = "scale("+iScale+")";  
    }
    fnViewScale();
    
    window.onresize = function(){
        fnViewScale();
    }
</script>